<template>
  <view class="shop-container">
    <!-- 顶部标签页 -->
    <view class="tab-header">
      <view 
        v-for="(tab, index) in productTypes" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <view :id="'tab-content-' + index" class="tab-content">
          {{ tab }}
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <swiper
      class="swiper-content"
      :current="currentTab"
      @change="handleSwiperChange"
      :duration="300"
      :circular="false"
      :skip-hidden-item-layout="true"
    >
      <swiper-item v-for="(type, index) in productTypes" :key="index">
        <scroll-view 
          scroll-y 
          class="scroll-content" 
          refresher-enabled 
          :refresher-triggered="isRefreshing"
          @refresherrefresh="onRefresh"
        >
          <view class="product-list">
            <view class="product-grid">
              <view 
                class="product-item"
                v-for="(item, idx) in productList" 
                :key="idx"
                @click="handleProductClick(item)"
              >
                <image class="product-image" :src="item.image" mode="aspectFill"></image>
                <text class="product-name">{{ item.name }}</text>
              </view>
            </view>
            
            <!-- 加载提示 -->
            <view class="loading-tip" v-if="loading">
              <text>{{ loadingText }}</text>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>

    <tabbar ref="tab" :activeIndex="activeTab" @switchTabChange="switchTab" @popLogin="popLogin"></tabbar>
    <service-agreeement ref="agreementPopup" @confirm="handleAgreementConfirm" />
  </view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'
import { USER_TYPES, userApi } from '@/service/api.js'
import { userStore } from '@/utils/userStore.js'
import { RouterMethods } from '@/utils/router'

// 商品类型列表
const productTypes = ref(['商品类型1', '商品类型2', '商品类型3', '商品类型4'])
const currentTab = ref(0)
const isRefreshing = ref(false)
const loading = ref(false)
const loadingText = ref('加载中...')

// 模拟商品数据
const productList = ref([
  {
    id: 1,
    name: '商品名称',
    image: '/static/org/org-success.png'
  },
  {
    id: 2,
    name: '商品名称商品名称商品名称商品名称商品名称2',
    image: '/static/org/org-success.png'
  },
  {
    id: 3,
    name: '商品名称',
    image: '/static/org/org-success.png'
  },
  {
    id: 4,
    name: '商品名称商品名称商品名称商品名称商品名称',
    image: '/static/org/org-success.png'
  }
])

// 加载商品数据
const loadProductData = async (tabIndex) => {
  if (loading.value) return
  
  loading.value = true
  loadingText.value = '加载中...'
  
  try {
    // TODO: 根据tabIndex加载对应类型的商品数据
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟加载数据
    productList.value = [
      {
        id: 1,
        name: `商品名称-类型${tabIndex + 1}`,
        image: '/static/org/org-success.png'
      },
	  {
	    id: 2,
	    name: `商品名称-类型${tabIndex + 2}`,
	    image: '/static/org/org-success.png'
	  },
	  {
	    id: 3,
	    name: `商品名称-类型${tabIndex + 3}`,
	    image: '/static/org/org-success.png'
	  },
	  {
	    id: 4,
	    name: `商品名称-类型${tabIndex + 4}`,
	    image: '/static/org/org-success.png'
	  },
      // ... 其他商品数据
    ]
  } catch (error) {
    uni.showToast({
      title: '加载失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 切换tab
const switchTab = async (index) => {
  if (currentTab.value === index) return
  currentTab.value = index
  await loadProductData(index)
}

// 处理滑动切换
const handleSwiperChange = async (e) => {
  const index = e.detail.current
  if (currentTab.value === index) return
  currentTab.value = index
  await loadProductData(index)
}

// 下拉刷新
const onRefresh = async () => {
  if (isRefreshing.value) return
  isRefreshing.value = true
  
  try {
    await loadProductData(currentTab.value)
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    })
  } finally {
    isRefreshing.value = false
  }
}

// 点击商品
const handleProductClick = (product) => {
  console.log('点击商品:', product)
  uni.navigateTo({
  	url: `/pages/gvr-shop/gvr-shop-detail?id=${product.id}`,
  });
}

// 原有代码...
const activeTab = ref(null)
const selectedType = ref('')

onShow(() => {
  selectedType.value = userStore.getType()
  if (selectedType.value == USER_TYPES.CLIENT ||
  selectedType.value == USER_TYPES.SUPPLIER ) {
    activeTab.value = 2
  } else {
    activeTab.value = 3
  }	
})

const agreementPopup = ref(null)
const popLogin = () => {
   agreementPopup.value.open()
}

const handleAgreementConfirm = async() => {
	setTimeout(()=>{
		RouterMethods.toHome()
	},1000)
  
  // const loginResult = await userApi.weixinCode()
}

// 初始化加载
onMounted(async () => {
  uni.hideTabBar()
  await loadProductData(0)
})
</script>

<style lang="scss">
.shop-container {
  min-height: 100vh;
  background: tomato;
  display: flex;
  flex-direction: column;
}

// tab导航样式
.tab-header {
  background: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  padding-top: 24rpx;
  padding-bottom: 12rpx;
}

.tab-item {
  flex: 1;
  height: 52rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s;
  margin: 0 20rpx;
}

.tab-content {
  font-family: PingFangSC-Light;
  font-size: 24rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 200;
  
  text-align: center;
  padding: 10rpx 18rpx;
  border-radius: 26rpx;
}

.tab-item.active {
  .tab-content {
    font-family: PingFangSC-Medium;
    color: #000000;
    font-weight: 500;
    background: #F2B642;
  }
  
  &::after {
    display: none;
  }
}

// swiper内容区域
.swiper-content {
  flex: 1;
  height: calc(100vh - 88rpx);
  margin-top: 88rpx;
  transition: transform 0.3s;
  background-color: #DEDEDE;
}

.scroll-content {
  height: 100%;
}

// 商品列表
.product-list {
  padding: 32rpx;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 14rpx;
  column-gap: 26rpx;
}

.product-item {
  background: #FFFFFF;
  box-shadow: 0px 0px 6px 0px rgba(173,173,173,0.5);
  overflow: hidden;
  padding: 12rpx;
  height: 346rpx;
}

.product-image {
  width: 100%;
  height: 234rpx;
}

.product-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

// 加载提示样式
.loading-tip {
  text-align: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 24rpx;
}

// 优化切换动画
.tab-item {
  transition: all 0.3s;
  
  &.active {
    transition: all 0.3s;
  }
}

.swiper-content {
  transition: transform 0.3s;
}
</style>
